<!-- 路由 -->
// 导入组件
import Vue from "vue";
import Router from "vue-router";
// 登录
import login from "@/views/login";
// 首页
import index from "@/views/index";
/**
 * 基础菜单
 */
// 产品列表
import product from "@/views/product/product";
// 产品库存
import inventory from "@/views/inventory/inventory";
// 产品销售分析
import sales from "@/views//charts/sales";
// 订单记录
import order from "@/views/order/order";
// 订单详情
import orderDetails from "@/views/orderDetails/orderDetails";
// 杀菌设备监控
import equipmentMonitoring from "@/views/equipmentMonitoring/equipmentMonitoring";
//freshnessMonitoring
import freshnessMonitoring from "@/views/freshnessMonitoring/freshnessMonitoring";
// 用户管理
import user from "@/views/system/user";
// 角色管理
import Role from "@/views/system/Role";
//  首页概览
import thinking from "@/views/charts/thinking";
// 启用路由
Vue.use(Router);
// 导出路由
export default new Router({
  routes: [
    {
      path: "/",
      name: "",
      component: login,
      hidden: true,
      meta: {
        requireAuth: false,
      },
    },
    {
      path: "/login",
      name: "登录",
      component: login,
      hidden: true,
      meta: {
        requireAuth: false,
      },
    },
    {
      path: "/index",
      name: "首页",
      component: index,
      iconCls: "el-icon-tickets",
      children: [
        {
          path: "/charts/thinking",
          name: "首页",
          component: thinking,
          meta: {
            requireAuth: true,
          },
        },
        {
          path: "/product/product",
          name: "产品列表",
          component: product,
          meta: {
            requireAuth: true,
          },
        },
        {
          path: "/inventory/inventory",
          name: "产品库存",
          component:inventory,
          meta: {
            requireAuth: true,
          },
        },
        {
          path: "/charts/sales",
          name: "产品销售统计",
          component:sales,
          meta: {
            requireAuth: true,
          },
        },
        {
            path: "/order/order",
            name: "订单记录",
            component: order,
            meta: {
              requireAuth: true,
            },
        },
        {
            path: "/orderDetails/orderDetails",
            name: "订单详情",
            component: orderDetails,
            meta: {
              requireAuth: true,
            },
        },
        {
            path: "/equipmentMonitoring/equipmentMonitoring",
            name: "杀菌设备监控",
            component: equipmentMonitoring,
            meta: {
              requireAuth: true,
            },
        },
        {
            path: "/freshnessMonitoring/freshnessMonitoring",
            name: "保鲜效果监测",
            component: freshnessMonitoring,
            meta: {
              requireAuth: true,
            },
        },
        {
          path: "/system/user",
          name: "用户管理",
          component: user,
          meta: {
            requireAuth: true,
          },
        },
        {
          path: "/system/Role",
          name: "角色管理",
          component: Role,
          meta: {
            requireAuth: true,
          },
        },
      ],
    },
  ],
});
<!-- 首页 -->
<template>
  <div class="stbox">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-title">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="thinking-content">
      <!-- 统计图 -->
      <div class="state-title">
        <div class="st-gbox" style="width:100%;height: 460px;">
          <div class="cavasbox" ref="salesNumberChart"></div>
        </div>
      </div>
      <!-- 等离子杀菌杀菌技术介绍 -->
      <div class="latest-technology-card">
        <h2>等离子杀菌杀菌技术介绍</h2>
        <ul>
          <li v-for="(update, index) in technology" :key="index">
            {{ update.content }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      scores: [  
        { date: '2024-04-01', sales: 82, },  
        { date: '2024-04-02', sales: 84, },  
        { date: '2024-04-03', sales: 85, },  
        { date: '2024-04-04', sales: 83,  },  
        { date: '2024-04-05', sales: 86, },  
        { date: '2024-04-06', sales: 87, },  
        { date: '2024-04-07', sales: 88,  }, 
        { date: '2024-04-08', sales: 86,  },
        { date: '2024-04-09', sales: 90,  },
        { date: '2024-04-10', sales: 93,  },
      ],
      technology:[
        { content: '等离子杀菌技术能够迅速杀灭各种细菌、病毒和真菌等微生物。', date: '2024-04-01' },  
        { content: '与传统的化学杀菌方法相比，等离子杀菌技术无需使用任何化学消毒剂，因此不会产生有害的残留物或二次污染。', date: '2024-04-02' }, 
        { content: '等离子杀菌技术具有广谱杀菌的特点，能够杀灭多种不同类型的微生物。无论是细菌、病毒还是真菌，它都能有效应对。', date: '2024-04-05' },
        { content: '等离子杀菌设备通常设计得易于操作和维护。用户只需按照简单的步骤启动设备，即可实现快速、高效的杀菌过程。', date: '2024-04-06' }, 
        { content: '等离子杀菌技术在杀菌过程中不产生有害的副产物，且对物品表面无腐蚀性，不会损害物品的质量和安全性。', date: '2024-04-07' },
      ],
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  created() { },
  mounted() {
    this.getsalesNumber()
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 销售额变化
    getsalesNumber() {
      let numbercollection= {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}日 : {c}"
        },
        title: {
          text: '销售额变化',
        },
        //显示图列
        legend: {
          data: [{
            name: '销售额',
            icon: 'rect'
          },
          ],
          type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: this.scores.map(score => score.date),
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          },
          min: 70, // 设置 Y 轴最小值  
          max: 100, // 设置 Y 轴最大值  
        },
        series: [{
          name: '销售额',
          type: 'line',
          barGap: 0,
          data: this.scores.map(score => score.sales) ,
          barWidth: 10,
          type: "line",
          symbol: "square",
          symbolSize: 8,
          smooth: true,
          itemStyle: {
            normal: {
              color: "#008080",
              lineStyle: {
                color: "#008080",
              }
            }
          }
        }, 
        ]
      }
      this.chart = Chart.init(this.$refs.salesNumberChart)
      this.chart.setOption(numbercollection)
    },
  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.canvas{
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
.breadcrumb-title {
  margin-top: 10px;
  margin-bottom: 10px;
}
.thinking-content {
  /* display: flex;
  align-items: center;
  justify-content: center; */
}
.latest-technology-card {  
  background-color: #fff;  
  border: 1px solid #ddd;  
  border-radius: 5px;  
  padding: 20px;  
  /* margin-bottom: 20px;   */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  
}  
.latest-technology-card h2 {  
  font-size: 18px;  
  /* margin-bottom: 15px;   */
}  
.latest-technology-card ul {  
  list-style-type: none;  
  padding: 0;  
}  
.latest-technology-card li {  
  margin-bottom: 10px;  
} 
</style>
<!-- 登录 -->
<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="userForm" :rules="rules" ref="userForm" label-width="0px" class="demo-userForm login-container">
      <h3 class="title">等离子杀菌果蔬生鲜平台</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="userForm.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="userForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="code">
            <el-input type="text" v-model="userForm.code" auto-complete="off" placeholder="图形验证码" @keyup.enter.native="submitUser('userForm')"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12" class="code-box">
          <img :src="userForm.codeimg" alt="" class="codeimg" @click="getcode()">
        </el-col>
      </el-row>
      <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
      <el-form-item style="width:100%;margin:0 auto">
        <el-button type="primary" style="width:40%; margin-right: 30px;" @click="submitUser('userForm')" :loading="logining">登录</el-button>
        <el-button style="width:40%;" @click="resetForm">重置</el-button> 
        <el-link type="text" @click="passwordReset">忘记密码？</el-link>   
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="passwordVisible" title="重置密码">
      <el-form
        :model="passwordResetForm"
        :rules="passwordResetRules"
        ref="passwordResetForm"
        label-width="120px"
      >
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="passwordResetForm.newPassword"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            type="password"
            v-model="passwordResetForm.confirmPassword"
            placeholder="请再次输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlePasswordResetSubmit"
            >提交</el-button
          >
          <el-button @click="passwordResetVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import { login } from '../api/userMG'
import { setCookie, getCookie, delCookie } from '../utils/util'
import md5 from 'js-md5'
export default {
  name: 'login',
  data() {
    return {
      //定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: false,
      userForm: {
        //username和password默认为空
        username: '',
        password: '',
        code: '',
        randomStr: '',
        codeimg: ''
      },
      //rules前端验证
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      passwordVisible: false,
      passwordForm: {
        newPassword: "",
        confirmPassword: "",
      },
      passwordResetRules: {
        newPassword: [
          { 
            required: true,
             message: "请输入新密码",
              trigger: "blur" 
          },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, 
            message: "请再次输入新密码",
             trigger: "blur"
          },
          { 
            validator: this.validateConfirmPassword, 
            trigger: "blur" 
          },
        ],
      },
      passwordResetForm: {
        newPassword: "",
        confirmPassword: "",
      },
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.$message({
      message: '账号密码及验证码不为空即可',
      type: 'success'
    })
    // 获取图形验证码
    this.getcode()
    // 获取存在本地的用户名密码
    this.getpwd()
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 获取用户名密码
    getpwd() {
      if (getCookie('user') != '' && getCookie('pwd') != '') {
        this.userForm.username = getCookie('user')
        this.userForm.password = getCookie('pwd')
        this.rememberpwd = true
      }
    },
    //获取info列表
    submitUser(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.logining = true
          // 测试通道，不为空直接登录
          setTimeout(() => {
            this.logining = false
            this.$store.commit('login', 'true')
            this.$router.push({ path: '/surgical/surgical' })
          }, 1000)
          // 正式环境
          login(this.userForm).then(res => {
            if (res.success) {
              if (this.rememberpwd) {
                //保存帐号到cookie，有效期7天
                setCookie('user', this.userForm.username, 7)
                //保存密码到cookie，有效期7天
                setCookie('pwd', this.userForm.password, 7)
              } else {
                delCookie('user')
                delCookie('pwd')
              }
              //如果请求成功就让他2秒跳转路由
              setTimeout(() => {
                this.logining = false
                // 缓存token
                localStorage.setItem('logintoken', res.data.token)
                // 缓存用户个人信息
                localStorage.setItem('userdata', JSON.stringify(res.data))
                this.$store.commit('login', 'true')
                this.$router.push({ path: '/surgical/surgical' })
              }, 1000)
            } else {
              this.$message.error(res.msg)
              this.logining = false
              return false
            }
          })
        } else {
          // 获取图形验证码
          this.getcode()
          this.$message.error('请输入用户名密码！')
          this.logining = false
          return false
        }
      })
    },
    //密码重置
    passwordReset() {
      this.passwordVisible = true;
    },
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
  }
}
</script>
<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url('https://img0.baidu.com/it/u=533318720,302761102&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500');
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
</style>
<!-- 左边导航菜单 -->
<template>
  <el-menu default-active="2" :collapse="collapsed" collapse-transition  router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
    <div class="logobox">
      等离子杀菌果蔬生鲜平台
    </div>
    <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
      <template slot="title">
        <span>{{menu.menuname}}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
          <span>{{chmenu.menuname}}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
import { menu } from '../api/userMG'
export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      // 右侧标题
      data: [
      {
          menuid: 1,
          icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
          menuname: '首页',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 11,
              icon: 'icon-provider-manage',
              menuname: '首页',
              hasThird: 'N',
              url: 'charts/thinking',
              menus: null
            }
          ]
        },
        {
          menuid: 2,
          icon: 'li-icon-xiangmuguanli',
          menuname: '产品管理模块',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 22,
              icon: 'icon-cat-skuQuery',
              menuname: '产品列表', //录入   产品详情
              hasThird: 'N',
              url: 'product/product',
              menus: null
            },
            {
              menuid: 23,
              icon: 'icon-cat-skuQuery',
              menuname: '产品库存',
              hasThird: 'N',
              url: 'inventory/inventory',
              menus: null
            },
            {
              menuid: 24,
              icon: 'icon-cat-skuQuery',
              menuname: '产品销售统计',
              hasThird: 'N',
              url: 'charts/sales',
              menus: null
            }
          ]
        },
        {
          menuid: 3,
          icon: 'li-icon-dingdanguanli',
          menuname: '订单管理模块',
          hasThird: null,
          url: null,
          menus: [
          {
              menuid: 31,
              icon: 'icon-provider-manage',
              menuname: '订单记录',
              hasThird: 'N',
              url: 'order/order',
              menus: null
            },
            {
              menuid: 32,
              icon: 'icon-order-manage',
              menuname: '订单详情',
              hasThird: 'N',
              url: 'orderDetails/orderDetails',
              menus: null
            },
          ]
        },
        {
          menuid: 4,
          icon: 'li-icon-dingdanguanli',
          menuname: '杀菌及保鲜管理模块',
          hasThird: null,
          url: null,
          menus: [
          {
              menuid: 41,
              icon: 'icon-provider-manage',
              menuname: '杀菌设备监控',//实时监控等离子杀菌设备的运行状态
              hasThird: 'N',
              url: 'equipmentMonitoring/equipmentMonitoring',
              menus: null
            },
            {
              menuid: 42,
              icon: 'icon-provider-manage',
              menuname: '保鲜效果监测', //监测果蔬的保鲜效果
              hasThird: 'N',
              url: 'freshnessMonitoring/freshnessMonitoring',
              menus: null
            },
          ]
        },
        {
          menuid: 5,
          icon: 'li-icon-xitongguanli',
          menuname: '用户管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 51,
              icon: 'icon-cus-manage',
              menuname: '用户管理',
              hasThird: 'N',
              url: 'system/user',
              menus: null
            },
            {
              menuid: 52,
              icon: 'icon-news-manage',
              menuname: '角色管理',
              hasThird: 'N',
              url: 'system/Role',
              menus: null
            },
          ]
        },
      ],
      msg: 'success'
    }
          this.allmenu = res.data
    menu(localStorage.getItem('logintoken'))
      .then(res => {
        console.log(JSON.stringify(res))
        if (res.success) {
          this.allmenu = res.data
        } else {
          this.$message.error(res.msg)
          return false
        }
      })
      .catch(err => {
        this.$message.error('数据加载失败，请稍后再试！')
      })
    // 监听
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })
  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
  background-color:rgba(2, 167, 240, 1) !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-submenu__title{
   background-color:rgba(2, 167, 240, 1) !important;
  color: white; 
}
.el-submenu__title i {
  color: white !important; 
}
.is-active{
  background-color:rgba(2, 167, 240, 1) !important;
  color: white !important;
}
.el-menu-bg {
  background-color: #1f2d3d ;
  background-color:rgba(2, 167, 240, 1) !important;
}
.el-menu-item{
  background-color:#fffff6 !important;
  color: rgba(2, 167, 240, 1) !important;
}
.el-menu {
  border: none;
}
.el-submenu{
  background-color:rgba(2, 167, 240, 1) !important;
  color: white;
}
.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
  background-color:rgba(2, 167, 240, 1);
  color: white;
}
.logoimg {
  height: 40px;
}
</style>
 <!--  用户管理 -->
 <template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb> 
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="">
        <el-input size="small" v-model="formInline.userName" placeholder="输入用户名"></el-input>
      </el-form-item>
       <el-form-item label="">
        <el-input size="small" v-model="formInline.userMobile" placeholder="输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" @selection-change="selectChange" :data="userData" highlight-current-row v-loading="loading" border element-loading-text="数据加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="50">
      </el-table-column>
      <el-table-column align="center" sortable prop="userName" label="用户名" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="userRole" label="角色" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="userMobile" label="手机号" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="userSex" label="性别" min-width="50">
      </el-table-column>
      <el-table-column align="center" sortable prop="userEmail" label="邮件" min-width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="editTime" label="修改时间" min-width="120">
        <template slot-scope="scope">
          <div>{{scope.row.editTime}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="isLock" label="状态" min-width="50">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isLock=='N'?nshow:fshow" active-color="#13ce66" inactive-color="#ff4949" @change="editType(scope.$index, scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center"  label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" type="success" @click="resetpwd(scope.$index, scope.row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="userFormVisible" width="30%" @click='closeDialog("edit")'>
      <el-form label-width="80px" ref="userForm" :model="userForm" :rules="rules">
        <el-form-item label="用户名" prop="userName">
          <el-input size="small" v-model="userForm.userName" auto-complete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="userRole">
          <el-input size="small" v-model="userForm.userRole" auto-complete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="userMobile">
          <el-input size="small" v-model="userForm.userMobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="userEmail">
          <el-input size="small" v-model="userForm.userEmail" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="userSex">
          <el-radio v-model="userForm.userSex" label="男">男</el-radio>
          <el-radio v-model="userForm.userSex" label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('userForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 导入请求方法
import {
  userList,
  userSave,
  userPwd,
  userLock,
} from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      title: '添加用户',
      userFormVisible: false, //控制编辑页面显示与隐藏
      // 编辑与添加
      userForm: {
        userId: '',
        userName: '',
        userRole: '',
        roleId: '',
        userMobile: '',
        userEmail: '',
        userSex: '',
        token: localStorage.getItem('logintoken')
      },
      // 参数
      unitparm: {
        userIds: '',
        deptId: '',
        deptName: ''
      },
      // 选择数据
      selectdata: [],
      // rules表单验证
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        userRole: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
        userMobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
            required: true,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        userEmail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            required: true,
            message: '请输入正确的邮箱',
            trigger: 'blur'
          }
        ],
        userSex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      },
      // 删除用户
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      // 重置密码
      resetpsd: {
        userId: '',
        token: localStorage.getItem('logintoken')
      },
      // 请求数据参数
      formInline: {
        page: 1,
        limit: 10,
        deptId: '',
        userName: '',
        userMobile: '',
        isLock: ''
      },
      //用户数据
      userData: [],
      // 数据权限
      UserDept: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 选中
      checkmenu: [],
      //参数role
      saveroleId: '',
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize:5,
        total:5
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  watch: {},
  created() {
    this.getdata(this.formInline)
  },
  methods: {
    // 获取数据方法
    getdata(parameter) {
      this.loading = true
      //测试环境使用数据
      let res = {
        code: 0,
        msg: null,
        count:7,
        data: [
          {
            addUser: '1',
            editUser: '1',
            addTime: null,
            editTime: "2024年03月01日",
            userId: 1,
            systemNo: 'pmd',
            userName: 'admin',
            userPassword: 'e10adc3949ba59abbe56e057f20f883e',
            userRole: '高级管理员',
            userSex: '女',
            userMobile: '138-xxxx-xxxx',
            userEmail: '111@qq.com',
            isLock: 'N',
            deptId: 1,
            deptName: 'xxxx',
            roleId: 1
          },
          {
            addUser: '2',
            editUser: '2',
            addTime: null,
            editTime: "2024年03月01日",
            userId: 2,
            systemNo: 'mc',
            userName: '梦回古韵',
            userPassword: 'e10adc3949ba59abbe56e057f20f883e',
            userRole: '系统管理员',
            userSex: '男',
            userMobile: '178-xxxx-xxxx',
            userEmail: 'menghui@example.com',
            isLock: 'N',
            deptId: 2,
            deptName: 'xxxx',
            roleId: 2
          },
          {
            addUser: '3',
            editUser: '3',
            addTime: null,
            editTime: "2024年03月09日",
            userId: 3,
            systemNo: 'ec',
            userName: '诗意流年',
            userPassword: '59ba8b7dda9ff79186311a5a9fa155ca',
            userRole: '数据分析员',
            userSex: '男',
            userMobile: '134-xxxx-xxxx',
            userEmail: 'shiyi@example.com',
            isLock: 'N',
            deptId: 3,
            deptName: 'xxxx',
            roleId: 3
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526275128000,
            editTime: "2024年03月22日",
            userId: 4,
            systemNo: null,
            userName: '墨香轻舞',
            userPassword: '5d41402abc4b2a76b9719d911017c592',
            userRole: '用户',
            userSex: '男',
            userMobile: '189-xxxx-xxxx',
            userEmail: 'moxiang@example.com',
            isLock: 'N',
            deptId: 4,
            deptName: 'zxxxxx',
            roleId: 4
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526275128000,
            editTime: "2024年03月23日",
            userId: 5,
            systemNo: null,
            userName: '琴音悠扬',
            userPassword: 'a94a8fe5ccb19ba61c4c0873d391e987982fbbd3',
            userRole: '用户',
            userSex: '女',
            userMobile: '176-xxxx-xxxx',
            userEmail: 'qinyou@example.com',
            isLock: 'N',
            deptId: 5,
            deptName: 'zxxxxx',
            roleId: 4
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526275128000,
            editTime: "2024年03月25日",
            userId: 6,
            systemNo: null,
            userName: '烟雨江南',
            userPassword: '03ac674216f3e15c761ee1a5e255f067953623c8',
            userRole: '用户',
            userSex: '女',
            userMobile: '135-xxxx-xxxx',
            userEmail: 'yanyujn@example.com',
            isLock: 'N',
            deptId: 6,
            deptName: 'zxxxxx',
            roleId: 4
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526275128000,
            editTime: "2024年03月29日",
            userId: 7,
            systemNo: null,
            userName: '醉卧云端',
            userPassword: 'c4ca4238a0b923820dcc509a6f75849b',
            userRole: '用户',
            userSex: '男',
            userMobile: '132-xxxx-xxxx',
            userEmail: 'zuiwoy@example.com',
            isLock: 'N',
            deptId: 7,
            deptName: 'zxxxxx',
            roleId: 4
          },
        ]
      }
      this.loading = false
      this.userData = res.data
      // 分页赋值
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
      // 获取用户列表
      userList(parameter).then(res => {
        this.loading = false
        if (res.success == false) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.userData = res.data
          // 分页赋值
          this.pageparm.currentPage = this.formInline.page
          this.pageparm.pageSize = this.formInline.limit
          this.pageparm.total = res.count
        }
      })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    //搜索事件
    search() {
      this.getdata(this.formInline)
    },
    // 修改type
    editType: function(index, row) {
      this.loading = true
      let parm = {
        lock: '',
        userId: '',
        token: localStorage.getItem('logintoken')
      }
      parm.userId = row.userId
      let lock = row.isLock
      if (lock == 'N') {
        parm.lock = 'Y'
      } else {
        parm.lock = 'N'
      }
      // 修改状态
      userLock(parm).then(res => {
        this.loading = false
        if (res.success == false) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.$message({
            type: 'success',
            message: '状态修改成功'
          })
          this.getdata(this.formInline)
        }
      })
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.userFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改用户'
        this.userForm.userId = row.userId
        this.userForm.userName = row.userName
        this.userForm.userRole = row.userRole
        this.userForm.roleId = row.roleId
        this.userForm.userMobile = row.userMobile
        this.userForm.userEmail = row.userEmail
        this.userForm.userSex = row.userSex
      } else {
        this.title = '添加用户'
        this.userForm.userId = ''
        this.userForm.userName = ''
        this.userForm.userRole = ''
        this.userForm.roleId = ''
        this.userForm.userMobile = ''
        this.userForm.userEmail = ''
        this.userForm.userSex = ''
      }
    },
    // 编辑、添加提交方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          // 请求方法
          userSave(this.userForm)
            .then(res => {
              this.userFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '数据保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.userFormVisible = false
              this.loading = false
              this.$message.error('保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    handleClick(data, checked, node) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([data])
        this.unitparm.deptId = data.id
        this.unitparm.deptName = data.name
        //交叉点击节点
      } else {
      }
    },
    closeDialog(dialog) {
        this.userFormVisible = false
    },
    // 重置密码
    resetpwd(index, row) {
      this.resetpsd.userId = row.userId
      this.$confirm('确定要重置密码吗?', '重置密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          userPwd(this.resetpsd)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '重置密码成功！'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('重置密码失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消重置密码！'
          })
        })
    },
  }
}
</script>
<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>
<!-- 角色管理 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.roleName" placeholder="输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="formInline.roleNo" placeholder="输入角色代码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="roleName" label="角色名称" width="300">
      </el-table-column>
      <el-table-column sortable prop="roleNo" label="角色代码" width="300">
      </el-table-column>
      <el-table-column sortable prop="editTime" label="修改时间" width="300">
        <template slot-scope="scope">
          <div>{{scope.row.editTime}}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="editUser" label="修改人" width="300">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
      <el-form label-width="120px" :model="editForm" ref="editForm" :rules="rules">
        <el-form-item label="系统编码" prop="systemNo">
          <el-input size="small" v-model="editForm.systemNo" auto-complete="off" placeholder="请输入系统编码"></el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="roleName">
          <el-input size="small" v-model="editForm.roleName" auto-complete="off" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色代码" prop="roleNo">
          <el-input size="small" v-model="editForm.roleNo" auto-complete="off" placeholder="请输入角色代码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
    <!-- 菜单权限 -->
    <el-dialog title="菜单权限" :visible.sync="menuAccessshow" width="30%" @click='closeDialog("perm")'>
      <el-tree ref="tree" default-expand-all="" :data="RoleRight" :props="RoleRightProps" :default-checked-keys="checkmenu" node-key="id" show-checkbox>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("perm")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="menuPermSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  roleList,
  roleSave,
  roleDelete,
  rolePwd,
  RoleRightTree,
  RoleRightSave
} from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      menuAccessshow: false, //控制数据权限显示与隐藏
      title: '添加',
      editForm: {
        roleId: '',
        systemNo: '',
        roleNo: '',
        roleName: '',
        token: localStorage.getItem('logintoken')
      },
      // rules 表单验证
      rules: {
        systemNo: [
          { required: true, message: '请输入系统编码', trigger: 'blur' }
        ],
        roleNo: [
          { required: true, message: '请输入角色代码', trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ]
      },
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 数据权限
      RoleRight: [],
      RoleRightProps: {
        children: 'children',
        label: 'name'
      },
      // 选中
      checkmenu: [],
      //参数role
      saveroleId: '',
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */
  watch: {},
  created() {
    this.getdata(this.formInline)
  },
  methods: {
    // 获取角色列表
    getdata(parameter) {
      // 模拟数据
      let res = {
        code: 0,
        msg: null,
        count: 5,
        data: [
          {
            addUser: 'admin',
            editUser: 'admin',
            addTime: 1519182004000,
            editTime: '2024年03月01日',
            roleId: 1,
            systemNo: 'pmd',
            roleNo: 'quan001',
            roleName: '高级管理员'
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1521111376000,
            editTime:'2024年03月10日',
            roleId: 2,
            systemNo: 'order',
            roleNo: 'quan002',
            roleName: '系统管理员'
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1520678221000,
            editTime: '2024年03月10日',
            roleId: 3,
            systemNo: 'pm',
            roleNo: 'quan003',
            roleName: '数据分析员'
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1520678221000,
            editTime: '2024年03月10日',
            roleId: 4,
            systemNo: 'pm',
            roleNo: 'quan004',
            roleName: '用户'
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1520678221000,
            editTime: '2024年03月10日',
            roleId: 5,
            systemNo: 'pm',
            roleNo: 'quan005',
            roleName: '测试'
          },
        ]
      }
      this.loading = false
      this.listData = res.data
      // 分页赋值
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
      roleList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.listData = res.data
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('获取角色列表失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.roleId = row.roleId
        this.editForm.systemNo = row.systemNo
        this.editForm.roleNo = row.roleNo
        this.editForm.roleName = row.roleName
      } else {
        this.title = '添加'
        this.editForm.roleId = ''
        this.editForm.systemNo = ''
        this.editForm.roleNo = ''
        this.editForm.roleName = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          roleSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '角色保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('角色保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除角色
    deleteUser(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          roleDelete(row.roleId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '角色已删除！'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('角色删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 数据权限
    menuAccess: function(index, row) {
      this.menuAccessshow = true
      this.saveroleId = row.roleId
      RoleRightTree(row.roleId)
        .then(res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '获取权限成功'
            })
            this.changemenu(res.data.data)
            this.RoleRight = this.changeArr(res.data.data)
          } else {
            this.$message({
              type: 'info',
              message: res.data.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('获取权限失败，请稍后再试！')
        })
    },
    // 选中菜单
    changemenu(arr) {
      let change = []
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].checked) {
          change.push(arr[i].id)
        }
      }
      this.checkmenu = change
    },
    // tree 递归
    changeArr(list) {
      var temptree = [],
        tree = [],
        items = []
      for (var i in list) {
        if (!temptree[list[i].id]) {
          var trow = {
            id: list[i].id,
            pId: list[i].pId,
            name: list[i].name,
            open: list[i].open,
            checked: list[i].checked,
            children: []
          }
          temptree[list[i].id] = trow
          items.push(trow)
        }
        if (list[i].uid > 0) {
          temptree[list[i].id]['children'].push({
            id: list[i].id,
            pId: list[i].pId,
            name: list[i].name,
            open: list[i].open,
            checked: list[i].checked,
            children: []
          })
        }
      }
      for (var j in items) {
        if (temptree[items[j].pId]) {
          temptree[items[j].pId]['children'].push(temptree[items[j].id])
        } else {
          tree.push(temptree[items[j].id])
        }
      }
      temptree = null
      items = null
      return tree
    },
    // 菜单权限-保存
    menuPermSave() {
      let parm = {
        roleId: this.saveroleId,
        moduleIds: ''
      }
      let node = this.$refs.tree.getCheckedNodes()
      let moduleIds = []
      if (node.length != 0) {
        for (let i = 0; i < node.length; i++) {
          moduleIds.push(node[i].id)
        }
        parm.moduleIds = JSON.stringify(moduleIds)
      }
      RoleRightSave(parm)
        .then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: '权限保存成功'
            })
            this.menuAccessshow = false
            this.getdata(this.formInline)
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('权限保存失败，请稍后再试！')
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      } else if (dialog == 'perm') {
        this.menuAccessshow = false
      }
    }
  }
}
</script>
<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>
<!-- 产品列表 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="productInline" class="surgery-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="productInline.name" placeholder="输入产品名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="productInline.category" placeholder="请输入类别"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="productEdit()">新增</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="productBankList" highlight-current-row v-loading="loading" border
      element-loading-text="拼命加载中" style="width: 95.2%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column align="center" prop="id" label="ID" width="200">
      </el-table-column>
      <el-table-column align="center" prop="name" label="产品名称" width="200">
      </el-table-column>
      <el-table-column align="center" prop="category" label="类别" width="100">
      </el-table-column>
      <el-table-column align="center" prop="price" label="价格" width="100">
        <template slot-scope="scope">
          <div>{{ scope.row.price.toFixed(2) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="weight" label="重量" width="200">
      </el-table-column>
      <el-table-column align="center" prop="origin" label="产地" width="200">
      </el-table-column>
      <el-table-column align="center" prop="plasmaDisinfection" label="等离子杀菌" width="260">
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="productEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteproduct(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="productVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="product" :rules="productRules" ref="product">
        <el-form-item label="ID" prop="id">
          <el-input size="small" v-model="product.id" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="name">
          <el-input size="small" v-model="product.name" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="类别" prop="category">
          <el-input size="small" v-model="product.category" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input size="small" v-model="product.price" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="重量" prop="weight">
          <el-input size="small" v-model="product.weight" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="产地" prop="origin">
          <el-input size="small" v-model="product.origin" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="等离子杀菌" prop="plasmaDisinfection ">
          <el-input size="small" v-model="product.plasmaDisinfection" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title"
          @click="submitForm('product')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { surgeryRoom, deptSave, productDelete } from '../../api'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      productVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      product: {
        id: '',
        name: '',
        category: '',
        price: '',
        weight: '',
        origin: '',
        plasmaDisinfection: '',
        token: localStorage.getItem('logintoken')
      },
      // productRules表单验证
      productRules: {
        name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        category: [{ required: true, message: '请输入类别', trigger: 'blur' }],
        pricee: [{ required: true, message: '请输入价格', trigger: 'blur' }]
      },
      productInline: {
        name:'',
        category:'',
        page: 1,
        limit: 10,
        token: localStorage.getItem('logintoken')
      },
      // 删除
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      productBankList: [], //数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.productInline)
  },
  methods: {
    // 获取数据列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 23,
        data: [
          {
            id: 1,
            name: '有机富士苹果',
            category: '水果',
            price: 12.99,
            weight: 450,
            origin: '山东',
            plasmaDisinfection: '已等离子杀菌'
          },
          {
            id: 2,
            name: '精选红心火龙果',
            category: '水果',
            price: 9.99,
            weight: 600,
            origin: '海南',
            plasmaDisinfection: '已杀菌处理'
          },
          {
            id: 3,
            name: '农家自产黄瓜',
            category: '蔬菜',
            price: 4.50,
            weight: 300,
            origin: '河北',
            plasmaDisinfection: '已通过等离子杀菌'
          },
          {
            id: 4,
            name: '新鲜有机生菜',
            category: '蔬菜',
            price: 5.99,
            weight: 250,
            origin: '江苏',
            plasmaDisinfection: '已等离子消毒'
          },
          {
            id: 5,
            name: '有机紫甘蓝',
            category: '蔬菜',
            price: 6.50,
            weight: 400,
            origin: '山东',
            plasmaDisinfection: '已杀菌'
          },
          {
            id: 6,
            name: '香甜金帅苹果',
            category: '水果',
            price: 10.49,
            weight: 550,
            origin: '陕西',
            plasmaDisinfection: '已等离子净化'
          },
          {
            id: 7,
            name: '精选皇冠梨',
            category: '水果',
            price: 8.88,
            weight: 400,
            origin: '河北',
            plasmaDisinfection: '已通过杀菌'
          },
          {
            id: 8,
            name: '精选芒果',
            category: '水果',
            price: 2.00,
            weight: 60,
            origin: '河南',
            plasmaDisinfection: '已等离子处理'
          },
          {
            id: 9,
            name: '新鲜有机西兰花',
            category: '蔬菜',
            price: 7.99,
            weight: 350,
            origin: '浙江',
            plasmaDisinfection: '已杀菌消毒'
          },
          {
            id: 10,
            name: '有机土豆',
            category: '蔬菜',
            price: 35.00,
            weight: 500,
            origin: '黑龙江',
            plasmaDisinfection: '已等离子杀菌处理'
          }
        ]
      }
      this.loading = false
      this.productBankList = res.data
      this.pageparm.currentPage = this.productInline.page
      this.pageparm.pageSize = this.productInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
      surgeryRoom(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.productBankList = res.data
            // 分页赋值
            this.pageparm.currentPage = this.productInline.page
            this.pageparm.pageSize = this.productInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.productInline.page = parm.currentPage
      this.productInline.limit = parm.pageSize
      this.getdata(this.productInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.productInline)
    },
    //添加、编辑
    productEdit: function (index, row) {
      this.productVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '编辑'
        this.product.roomNumber = row.roomNumber
        this.product.roomName = row.roomName
        this.product.bookingStatus = row.bookingStatus
        this.product.usageStatus = row.usageStatus
        this.product.surgeryType = row.surgeryType
        this.product.surgeryTime = row.surgeryTime
      } else {
        this.title = '添加'
        this.product.roomNumber = ''
        this.product.roomName = ''
        this.product.bookingStatus = ''
        this.product.usageStatus = ''
        this.product.surgeryType = ''
        this.product.surgeryTime = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          deptSave(this.product)
            .then(res => {
              this.productVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.productInline)
                this.$message({
                  type: 'success',
                  message: '产品保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.productVisible = false
              this.loading = false
              this.$message.error('产品保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除产品
    deleteproduct(index, row) {
      this.$confirm(`确定要删除产品吗?`, '删除产品', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          productDelete(row.productBankId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '产品已删除!'
                })
                this.getdata(this.productInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('产品删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹框
    closeDialog() {
      this.productVisible = false
    }
  }
}
</script>
<!-- 产品库存 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品库存</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="inventoryInline" class="surgery-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="inventoryInline.name" placeholder="输入产品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="inventoryEdit()">新增</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="inventoryList" highlight-current-row v-loading="loading" border
      element-loading-text="拼命加载中" style="width: 95.2%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column align="center" prop="id" label="ID" width="200">
      </el-table-column>
      <el-table-column align="center" prop="name" label="产品名称" width="200">
      </el-table-column>
      <el-table-column align="center" prop="quantity" label="库存数量" width="100">
      </el-table-column>
      <el-table-column align="center" prop="unit" label="单位" width="100">
      </el-table-column>
      <el-table-column align="center" prop="purchaseDate" label="采购日期" width="200">
      </el-table-column>
      <el-table-column align="center" prop="expirationDate" label="保质期" width="200">
      </el-table-column>
      <el-table-column align="center" prop="remark" label="备注" width="260">
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="inventoryEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteinventory(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="inventoryVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="inventory" :rules="inventoryRules" ref="inventory">
        <el-form-item label="ID" prop="id">
          <el-input size="small" v-model="inventory.id" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="name">
          <el-input size="small" v-model="inventory.name" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" prop="quantity">
          <el-input size="small" v-model="inventory.quantity" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input size="small" v-model="inventory.price" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="采购日期" prop="purchaseDate">
          <el-input size="small" v-model="inventory.purchaseDate" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="保质期" prop="expirationDate">
          <el-input size="small" v-model="inventory.expirationDate" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input size="small" v-model="inventory.remark" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title"
          @click="submitForm('inventory')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
 import { nventoryData, deptSave, inventoryDelete } from '../../api/inventory'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      inventoryVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      inventory: {
        id: '',
        name: '',
        category: '',
        price: '',
        weight: '',
        origin: '',
        plasmaDisinfection: '',
        token: localStorage.getItem('logintoken')
      },
      // inventoryRules表单验证
      inventoryRules: {
        name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        category: [{ required: true, message: '请输入类别', trigger: 'blur' }],
        pricee: [{ required: true, message: '请输入价格', trigger: 'blur' }]
      },
      inventoryInline: {
        name: '',
        page: 1,
        limit: 10,
        token: localStorage.getItem('logintoken')
      },
      // 删除
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      inventoryList: [], //数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.inventoryInline)
  },
  methods: {
    // 获取数据列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 37,
        data: [
          {
            id:1,
            "name": "有机富士苹果",
            "quantity": 500,
            "unit": "箱",
            "purchaseDate": "2023-10-01",
            "expirationDate": "2023-12-31",
            "remark": "新鲜采摘，已等离子杀菌"
          },
          {
            id:2,
            "name": "精选红心火龙果",
            "quantity": 300,
            "unit": "个",
            "purchaseDate": "2023-10-05",
            "expirationDate": "2023-11-15",
            "remark": "口感鲜美，已杀菌处理"
          },
          {
            id:3,
            "name": "农家自产黄瓜",
            "quantity": 800,
            "unit": "斤",
            "purchaseDate": "2023-10-03",
            "expirationDate": "2023-10-20",
            "remark": "绿色健康，已通过杀菌"
          },
          {
            id:4,
            "name": "新鲜有机生菜",
            "quantity": 600,
            "unit": "包",
            "purchaseDate": "2023-10-08",
            "expirationDate": "2023-11-05",
            "remark": "叶绿汁多，已等离子消毒"
          },
          {
            id:5,
            "name": "有机紫甘蓝",
            "quantity": 450,
            "unit": "颗",
            "purchaseDate": "2023-10-06",
            "expirationDate": "2023-11-10",
            "remark": "营养丰富，已杀菌"
          },
          {
            id:6,
            "name": "香甜金帅苹果",
            "quantity": 700,
            "unit": "箱",
            "purchaseDate": "2023-10-02",
            "expirationDate": "2023-12-20",
            "remark": "甜脆可口，已等离子净化"
          },
          {
            id:7,
            "name": "精选皇冠梨",
            "quantity": 250,
            "unit": "斤",
            "purchaseDate": "2023-10-07",
            "expirationDate": "2023-11-05",
            "remark": "皮薄肉嫩，已通过杀菌"
          },
          {
            id:8,
            "name": "精选芒果",
            "quantity": 18,
            "unit": "箱",
            "purchaseDate": "2023-10-04",
            "expirationDate": "2023-11-01",
            "remark": "皮薄肉嫩，已等离子处理"
          },
          {
            id:9,
            "name": "有机西红柿",
            "quantity": 900,
            "unit": "斤",
            "purchaseDate": "2023-10-09",
            "expirationDate": "2023-11-15",
            "remark": "色泽鲜艳，已等离子杀菌"
          },
          {
            id:10,
            "name": "有机土豆",
            "quantity": 100,
            "unit": "斤",
            "purchaseDate": "2023-10-10",
            "expirationDate": "2023-10-30",
            "remark": "鲜美可口，已等离子杀菌处理"
          }
        ]
      }
      this.loading = false
      this.inventoryList = res.data
      this.pageparm.currentPage = this.inventoryInline.page
      this.pageparm.pageSize = this.inventoryInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
      nventoryData(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.inventoryList = res.data
            // 分页赋值
            this.pageparm.currentPage = this.inventoryInline.page
            this.pageparm.pageSize = this.inventoryInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.inventoryInline.page = parm.currentPage
      this.inventoryInline.limit = parm.pageSize
      this.getdata(this.inventoryInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.inventoryInline)
    },
    //添加、编辑
    inventoryEdit: function (index, row) {
      this.inventoryVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '编辑'
        this.inventory.roomNumber = row.roomNumber
        this.inventory.roomName = row.roomName
        this.inventory.bookingStatus = row.bookingStatus
        this.inventory.usageStatus = row.usageStatus
        this.inventory.surgeryType = row.surgeryType
        this.inventory.surgeryTime = row.surgeryTime
      } else {
        this.title = '添加'
        this.inventory.roomNumber = ''
        this.inventory.roomName = ''
        this.inventory.bookingStatus = ''
        this.inventory.usageStatus = ''
        this.inventory.surgeryType = ''
        this.inventory.surgeryTime = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          deptSave(this.inventory)
            .then(res => {
              this.inventoryVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.inventoryInline)
                this.$message({
                  type: 'success',
                  message: '产品库存保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.inventoryVisible = false
              this.loading = false
              this.$message.error('产品库存保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除产品
    deleteinventory(index, row) {
      this.$confirm(`确定要删除产品库存吗?`, '删除产品库存', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          inventoryDelete(row.inventoryBankId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '产品库存已删除!'
                })
                this.getdata(this.inventoryInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('产品库存删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹框
    closeDialog() {
      this.inventoryVisible = false
    }
  }
}
</script>
<!--产品销售统计  -->
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
   <!-- 面包屑导航 -->
   <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品销售统计</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索，切换 -->
    <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
          <el-row :gutter="23">
            <el-col :span="7">
              <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
            <el-col :span="7" class="stsearch">
              <el-button size="small" type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:1400px;height: 350px;">
          <div class="cavasbox" ref="trendchart"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:1400px;height: 350px;">
          <div class="cavasbox" ref="saleschart"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      // 销售趋势
      trendOption: {
        title: {  
          text: '销售趋势',  
          subtext: '2024年04月01-2024年04月10',  
          left: 'center'  
        },  
        tooltip: {  
          trigger: 'axis',  
          axisPointer: {  
            type: 'shadow'  
          }  
        },  
        legend: {  
          data: ['']  
        },  
        xAxis: {  
          type: 'category',  
          data: [
          '2024-04-01',
          '2024-04-02',
          '2024-04-03',
          '2024-04-04',
          '2024-04-05',
          '2024-04-06',
          '2024-04-07',
          '2024-04-08',
          '2024-04-09',
          '2024-04-10'
          ], // 时间数据
          boundaryGap: false  
        },  
        yAxis: {  
          type: 'value'  
        },  
        series: [  
          {  
            name: '销售额',  
            type: 'line',  
            data: [178,112,214,156,134,175,189,123,148,198], // 这里将是你的销售额数据列表  
            smooth: true  
          }  
        ]  
      },
       //  销售数量
       salesOption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '销售数量',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['有机富士苹果', '精选红心火龙果', '农家自产黄瓜', '新鲜有机生菜', '有机紫甘蓝', '香甜金帅苹果', '精选皇冠梨', '精选芒果', '有机西红柿', '有机土豆',],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '销售数量',
          type: 'bar',
          barGap: 0,
          data: [50, 30, 53, 62, 45, 31, 49, 29, 61, 48],
          barWidth: 10,
          itemStyle: {
            color: "#48cefd"
          }
        }]
      },
    }
  },
  created() { },
  mounted() {
    this.getTrend()
    this.getSales()
  },
  // 里面的函数只有调用才会执行
  methods: {
    //第一手术室
    getTrend() {
      this.chart = Chart.init(this.$refs.trendchart) //深色模式  ,'dark'
      this.chart.setOption(this.trendOption)
    },
    // 第二手术室
    getSales() {
      this.chart = Chart.init(this.$refs.saleschart)
      this.chart.setOption(this.salesOption)
    },
  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>
 <!-- 订单记录 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单记录</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="orderInline" class="surgery-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="orderInline.orderId" placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="orderInline.productName" placeholder="产品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="orderEdit()">新增记录</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="orderList" highlight-current-row v-loading="loading" border
      element-loading-text="拼命加载中" style="width: 95.2%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column align="center" prop="orderId" label="订单号" width="200">
      </el-table-column>
      <el-table-column align="center" prop="productName" label="产品名称" width="200">
      </el-table-column>
      <el-table-column align="center" prop="quantity" label="数量" width="100">
      </el-table-column>
      <el-table-column align="center" prop="unitPrice" label="单价" width="100">
      </el-table-column>
      <el-table-column align="center" prop="totalPrice" label="总价" width="100">
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态" width="100">
      </el-table-column>
      <el-table-column align="center" prop="orderDate" label="订单日期" width="200">
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="orderEdit(scope.$index, scope.row)">查看详情</el-button>
          <el-button size="mini" type="danger" @click="deleteorder(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="orderVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="order" :rules="orderRules" ref="order">
        <el-form-item prop="orderId" label="订单号">
          <el-input size="small" v-model="order.orderId" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="productName" label="产品名称">
          <el-input size="small" v-model="order.productName" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="quantity" label="数量">
          <el-input size="small" v-model="order.quantity" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item   prop="unitPrice" label="单价"  width="100">
          <el-input size="small" v-model="order.unitPrice" auto-complete="off" placeholder="请输入"></el-input>
      </el-form-item> 
        <el-form-item prop="totalPrice" label="总价">
          <el-input size="small" v-model="order.quantity" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item> 
        <el-form-item prop="status" label="状态">
          <el-input size="small" v-model="order.status" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="orderDate" label="订单日期">
          <el-input size="small" v-model="order.orderDate" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title"
          @click="submitForm('order')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
 import {orderData, orderSave, orderDelete } from '../../api/basisMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      orderVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      order: {
        orderId: '',  
        productName: '',  
        quantity: '',  
        unitPrice: '',  
        totalPrice: '',  
        status: '',  
        orderDate: '',  
        action: '' ,
        token: localStorage.getItem('logintoken')
      },
      // orderRules表单验证
      orderRules: {
        quantity: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ],
        productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
        totalPrice: [{ required: true, message: '请输入总价', trigger: 'blur' }]
      },
      orderInline: {
        orderId:'',
        productName:'',
        page: 1,
        limit: 10,
        token: localStorage.getItem('logintoken')
      },
      // 删除
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      orderList: [], //数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.orderInline)
  },
  methods: {
    // 获取数据列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 43,
        data: [
        {  
        orderId: 'OD0001',  
        productName: '等离子杀菌苹果',  
        quantity: 5,  
        unitPrice: 10.99,  
        totalPrice: 54.95,  
        status: '已支付',  
        orderDate: '2024-04-01 10:00:00',  
        action: '查看详情'  
      },  
      {  
        orderId: 'OD0002',  
        productName: '等离子杀菌草莓',  
        quantity: 3,  
        unitPrice: 15.99,  
        totalPrice: 47.97,  
        status: '待支付',  
        orderDate: '2024-04-01 15:30:00',  
        action: '支付'  
      },  
      {  
        orderId: 'OD0003',  
        productName: '等离子杀菌橙子',  
        quantity: 8,  
        unitPrice: 8.99,  
        totalPrice: 71.92,  
        status: '已发货',  
        orderDate: '2024-04-01 09:15:00',  
        action: '查看物流'  
      },  
      {  
        orderId: 'OD0004',  
        productName: '等离子杀菌葡萄',  
        quantity: 2,  
        unitPrice: 12.99,  
        totalPrice: 25.98,  
        status: '已取消',  
        orderDate: '2024-04-01 14:45:00',  
        action: '无'  
      },  
      {  
        orderId: 'OD0005',  
        productName: '等离子杀菌猕猴桃',  
        quantity: 4,  
        unitPrice: 9.99,  
        totalPrice: 39.96,  
        status: '待发货',  
        orderDate: '2024-04-01 11:00:00',  
        action: '催发货'  
      },  
      {  
        orderId: 'OD0006',  
        productName: '等离子杀菌香蕉',  
        quantity: 6,  
        unitPrice: 6.99,  
        totalPrice: 41.94,  
        status: '已支付',  
        orderDate: '2024-04-01 18:30:00',  
        action: '查看详情'  
      },  
      {  
        orderId: 'OD0007',  
        productName: '等离子杀菌梨',  
        quantity: 10,  
        unitPrice: 7.99,  
        totalPrice: 79.90,  
        status: '已收货',  
        orderDate: '2024-04-01 13:15:00',  
        action: '评价'  
      },  
      {  
        orderId: 'OD0008',  
        productName: '等离子杀菌火龙果',  
        quantity: 7,  
        unitPrice: 11.99,  
        totalPrice: 83.93,  
        status: '待评价',  
        orderDate: '2024-04-01 08:45:00',  
        action: '评价'  
      },  
      {  
        orderId: 'OD0009',  
        productName: '等离子杀菌西蓝花',  
        quantity: 2,  
        unitPrice: 19.99,  
        totalPrice: 39.98,  
        status: '已支付',  
        orderDate: '2024-04-01 16:00:00',  
        action: '查看详情'  
      },  
      {  
        orderId: 'OD0010',  
        productName: '等离子杀菌生菜',  
        quantity: 1,  
        unitPrice: 8.99,  
        totalPrice: 8.99,
        status: '已支付',  
        orderDate: '2024-04-01 16:00:00',  
        action: '查看详情'  
      }
        ]
      }
      this.loading = false
      this.orderList = res.data
      this.pageparm.currentPage = this.orderInline.page
      this.pageparm.pageSize = this.orderInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
     orderData(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.orderList = res.data
            // 分页赋值
            this.pageparm.currentPage = this.orderInline.page
            this.pageparm.pageSize = this.orderInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.orderInline.page = parm.currentPage
      this.orderInline.limit = parm.pageSize
      this.getdata(this.orderInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.orderInline)
    },
    //添加、编辑
    orderEdit: function (index, row) {
      this.orderVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '查看详情'
        this.order.orderId = row.orderId
        this.order.productName = row.productName
        this.order.quantity = row.quantity
        this.order.totalPrice = row.totalPrice
        this.order.status= row.status
        this.order.orderDate = row.orderDate
        this.order.unitPrice = row.unitPrice
      } else {
        this.title = '添加'
        this.order.orderId = ''
        this.order.productName = ''
        this.order.quantity = ''
        this.order.totalPrice = ''
        this.order.unitPrice = ''
        this.order.status = ''
        this.order.orderDate = ''
      }
    },
    // 保存
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          orderSave(this.order)
            .then(res => {
              this.orderVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.orderInline)
                this.$message({
                  type: 'success',
                  message: '订单记录保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.orderVisible = false
              this.loading = false
              this.$message.error('订单记录保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除产品
    deleteorder(index, row) {
      this.$confirm(`确定要删除订单记录吗?`, '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          orderDelete(row.orderBankId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '订单记录已删除!'
                })
                this.getdata(this.orderInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('订单记录删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹框
    closeDialog() {
      this.orderVisible = false
    }
  }
}
</script>
<!-- 订单详情 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="order-detail">
      <!-- 订单头部信息 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单详情</span>
        </div>
        <div>
          <el-form>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="订单编号">
                  {{ orderDetails.orderId }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="下单时间">
                  {{ orderDetails.orderTime }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单状态">
                  {{ orderDetails.status }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="收货人">
                  {{ orderDetails.receiverName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货地址">
                  {{ orderDetails.receiverAddress }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="支付方式">
                  {{ orderDetails.paymentMethod }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="订单总金额">
                  {{ orderDetails.totalAmount }} 元
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
      <!--   订单明细列表   -->
      <el-card class="box-card" v-if="orderDetails.items">
        <div slot="header" class="clearfix">
          <span>订单明细</span>
        </div>
        <el-table :data="orderDetails.items" style="width: 100%">
          <el-table-column prop="productName" label="商品名称"></el-table-column>
          <el-table-column prop="quantity" label="数量"></el-table-column>
          <el-table-column prop="unitPrice" label="单价 (元)"></el-table-column>
          <el-table-column prop="subTotal" label="小计 (元)"></el-table-column>
        </el-table>
      </el-card>
      <!-- 操作按钮 -->
      <el-row class="text-center" >
        <el-button v-if="orderDetails.status === '待支付'" type="primary" @click="handlePay">支付</el-button>
        <el-button v-if="orderDetails.status === '已支付' && !orderDetails.isDelivered" type="primary" disabled>待发货</el-button>
        <el-button v-if="orderDetails.status === '已发货'" type="primary" @click="handleViewLogistics">查看物流</el-button>
        <el-button v-if="orderDetails.status === '已收货'" type="primary" @click="handleConfirmReceipt">确认收货</el-button>
        <el-button v-if="orderDetails.status === '已完成'" type="primary" @click="handleEvaluate">评价</el-button>
      </el-row>
    </div>
  </div>
</template>
<script>
 import { orderDetailsData, orderSave, orderDelete } from '../../api/basisMG'
export default {
  // name: 'MyComponent', // 组件的名称 
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      orderVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      orderDetails: {},
      orderDetailsInline: {
        orderId: '',
        productName: '',
        token: localStorage.getItem('logintoken')
      },
    }
  },
  created() {
    this.getorderDetailsdata(this.orderDetailsInline)
  },
  methods: {
    // 获取数据列表
    getorderDetailsdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 18,
        data: {
          orderId: '1234567890',
          orderTime: '2024-04-01 T12:00:00Z',
          receiverName: '张三',
          receiverAddress: '北京市北京市丰台区xx街道xx号',
          receiverPhone: '13800000000',
          status: '已支付',
          paymentMethod: '在线支付',
          totalAmount: 224.89,
          items: [
            {
              productId: 1,
              productName: '等离子杀菌苹果',
              quantity: 5,
              unitPrice: 10.99,
              subTotal: 54.95
            },
            {
              productId: 2,
              productName: '等离子杀菌生菜',
              quantity: 2,
              unitPrice: 9.99,
              subTotal: 19.98
            },
            {
              productId: 3,
              productName: '等离子杀菌土豆',
              quantity: 2,
              unitPrice: 9.99,
              subTotal: 19.98
            },
            {
              productId: 4,
              productName: '等离子杀菌火龙果',
              quantity: 2,
              unitPrice: 19.99,
              subTotal: 39.98
            },
            {
              productId: 5,
              productName: '等离子杀菌农家自产黄瓜',
              quantity: 20,
              unitPrice:4.5,
              subTotal: 90.00
            },
          ]
        }
      }
      this.loading = false
      this.orderDetails = res.data
      console.log(this.orderDetails, "8978");
      // 测试环境  模拟数据结束  
      /***
       *  正式环境环境 调用接口
       */
       orderDetailsData(parameter)
          .then(res => {
            this.loading = false
            if (res.success == false) {
              this.$message({
                type: 'info',
                message: res.msg
              })
            } else {
              this.orderDetails = res.data
            }
          })
          .catch(err => {
            this.loading = false
            this.$message.error('加载失败，请稍后再试！')
          })
    },
    //去支付
    handlePay() {
        this.$bus.$emit('pay',this.orderDetails)
    },
    //查看物流
    handleViewLogistics() {
      this.$bus.$emit('viewLogistics',this.orderDetails)
    },
    //确认收货
    handleConfirmReceipt() {
      this.$bus.$emit('viewLogistics',this.orderDetails)
    },
    //评价
    handleEvaluate() {
      this.$bus.$emit('evaluate',this.orderDetails) 
    }
  }
}
</script>
<style scoped>
.order-detail{
  margin-top: 30px;
}
.text-center{
  margin-top: 20px;
}
.order-detail-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}
.order-summary {
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.order-summary dl {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.order-summary dt,
.order-summary dd {
  flex: 1 0 50%;
  margin: 0;
  padding: 5px 0;
}
.order-summary dt {
  font-weight: bold;
}
.order-items {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.order-items th,
.order-items td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.order-items th {
  background-color: #f2f2f2;
}
.order-actions {
  margin-top: 20px;
}
.order-actions button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition-duration: 0.4s;
}
.order-actions button:hover {
  background-color: #45a049;
  /* Dark Green */
  color: white;
}
</style>
<!-- 杀菌设备监控 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>杀菌设备监控</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="device-monitoring-page">
      <el-container>
        <el-main>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>设备状态概览</span>
                </div>
                <div>
                  <el-tag v-if="deviceStatus === 'online'" type="success">在线</el-tag>
                  <el-tag v-else type="warning">离线</el-tag>
                </div>
                <div>
                  <el-button @click="toggleDeviceStatus">切换设备状态</el-button>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>实时杀菌进度</span>
                </div>
                <div>
                  <el-progress :percentage="killProgress" :status="progressStatus"></el-progress>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>设备详细信息与参数</span>
                </div>
                <el-table :data="deviceInfo" style="width: 100%">
                  <el-table-column prop="name" label="参数名称"></el-table-column>
                  <el-table-column prop="value" label="参数值"></el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>报警与通知</span>
                </div>
                <el-alert v-for="(alert, index) in alerts" :key="index" :title="alert.message" :type="alert.type"
                  description="点击关闭报警" closable @close="handleClose(index)"></el-alert>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>控制与操作</span>
                </div>
                <el-button type="primary" @click="startKilling">开始杀菌</el-button>
                <el-button type="danger" @click="stopKilling">停止杀菌</el-button>
                <el-button @click="resetDevice">重置设备</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
import { equipmentData, orderSave, orderDelete } from '../../api/basisMG'
export default {
  // name: 'MyComponent', // 组件的名称 
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      orderVisible: false, //控制编辑页面显示与隐藏
      orderDetails: {},
      orderDetailsInline: {
        orderId: '',
        productName: '',
        token: localStorage.getItem('logintoken')
      },
       deviceInfo :[  
      { name: '型号', value: 'PDK-1000' },  
      { name: '温度', value: '25°C' },  
      { name: '湿度', value: '50%' },  
      // ... 其他设备信息  
    ], 
    deviceStatus: 'online', // 设备状态：online 或 offline  
        killProgress: 48, // 杀菌进度  
        progressStatus: 'success', // 进度条状态  
        alerts: [
          { message: '温度过高', type: 'warning' },
          { message: '湿度不够', type: 'warning' },
        ],
        timer: null, // 用于存储 setInterval 的返回值，以便清除定时器  
      // vue进度 
      option: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: '杀菌进度',
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        series: [
          {
            name: '杀菌进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 48, name: '杀菌进度' }],
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, '#67e0e3'], // 0 到 30% 使用颜色渐变
                  [0.7, '#37a2da'], // 30% 到 70% 使用颜色渐变
                  [1, '#fd666d'],   // 70% 到 100% 使用颜色渐变
                ]
              }
            },
          }
        ]
      },
    }
  },
  created() {
    this.getequipmentData(this.orderDetailsInline)
  },
  methods: {
    // 获取数据列表
    getequipmentData(parameter) {
      //正式环境环境 调用接口
       equipmentData(parameter)
          .then(res => {
            this.loading = false
            if (res.success == false) {
              this.$message({
                type: 'info',
                message: res.msg
              })
            } else {
              this.orderDetails = res.data
            }
          })
          .catch(err => {
            this.loading = false
            this.$message.error('加载失败，请稍后再试！')
          })
    },
    //开始杀菌
    startKilling() {
      // 开始杀菌的逻辑  
      this.killProgress.value = 0;
      this.progressStatus.value = 'active';
      //测试环境 启动一个定时器模拟杀菌进度  
      const timer = setInterval(() => {
        this.killProgress.value += 10;
        if (killProgress.value >= 100) {
          clearInterval(timer);
          this.progressStatus.value = 'success';
        }
      }, 1000);
    },
    // 停止杀菌
    stopKilling() {
      this.progressStatus.value = 'exception';
    },
    //// 切换设备状态  
    toggleDeviceStatus() {
      this.deviceStatus.value = this.deviceStatus.value === 'online' ? 'offline' : 'online';
    },
    //重置设备
    resetDevice(){
        // 重置设备的逻辑  
      this.deviceStatus.value = 'online';  
      this.killProgress.value = 0;  
      this.progressStatus.value = 'success';  
      this.alerts.value = []; // 清除所有报警  
    },
    //处理关闭报警  
    handleClose(index){
      const newAlerts = [...alerts.value];  
      newAlerts.splice(index, 1);  
      alerts.value = newAlerts;  
    }
  }
}
</script>
<!-- 保鲜效果监测 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>保鲜效果监测</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="monitoring-page">   
    <el-row>  
      <el-col :span="24">  
        <el-card class="box-card">  
          <div slot="header" class="clearfix">  
            <span>实时数据</span>  
          </div>  
          <el-table :data="realTimeData" style="width: 100%">  
            <el-table-column prop="name" label="物品名称"></el-table-column>  
            <el-table-column prop="temperature" label="温度 (℃)"></el-table-column>  
            <el-table-column prop="humidity" label="湿度 (%)"></el-table-column>  
            <el-table-column prop="sterilizationLevel" label="杀菌等级"></el-table-column>  
            <!-- 其他列 -->  
          </el-table>  
        </el-card>  
      </el-col>    
    </el-row>  
    <el-row>  
      <el-col :span="24">  
        <el-card class="box-card">  
          <div slot="header" class="clearfix">  
            <span>保鲜效果图表</span>  
          </div> 
          <div ref="chart" style="width: 100%; height: 280px;"></div>  
        </el-card>  
      </el-col>  
    </el-row>  
  </div>
  </div>
</template>
<script>
import Chart from 'echarts'
export default {
   name: 'MyComponent', // 组件的名称 
  data() {
    return {
      realTimeData:[],
      chartOptions:{  
      title: {  
        text: '果蔬保鲜效果监测',  
        subtext: '保鲜效果监测',  
        left: 'center'  
      },    
      legend: {  
        data: ['温度', '湿度'], // 图例列表  
        left:"20%",//距离 可百分比% 可像素pxs
        type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
      },  
      xAxis: {  
        type: 'category',  
        data: ['等离子杀菌苹果', '等离子杀菌香蕉', '等离子杀菌橙子', '等离子杀菌草莓', '等离子杀菌葡萄'],//// X轴类目数据 
        axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }  
      },  
      yAxis: {  
        type: 'value'  
      },  
      series: [  
        {  
          name: '温度',  
          type: 'bar',  
          data: [5, 20, 36, 10, 10] // 温度数据  
        },  
        {  
          name: '湿度',  
          type: 'bar',  
          data: [50, 62, 45, 70, 80] // 湿度数据  
        }  
      ],   
    },
      }
  },
  created() {
    this.getequipmentData()
  },
  mounted(){
    this.getcharts()
  },
  methods: {
    // 获取数据列表
    getequipmentData(parameter) {
      //模拟测试环境数据
      let res = {
        msg: null,
        data: [
        { name: '等离子杀菌苹果', temperature: 4.2, humidity: 62, sterilizationLevel: '高' },  
      { name: '等离子杀菌香蕉', temperature: 5.1, humidity: 57, sterilizationLevel: '中' },  
      { name: '等离子杀菌橙子', temperature: 3.9, humidity: 65, sterilizationLevel: '高' },  
      { name: '等离子杀菌草莓', temperature: 4.5, humidity: 59, sterilizationLevel: '高' },  
      { name: '等离子杀菌土豆', temperature: 4.8, humidity: 60, sterilizationLevel: '中' }, 
        ]
      }
      this.realTimeData = res.data
    },
    //果蔬保鲜图表
    getcharts() {
      this.chart = Chart.init(this.$refs.chart)
      this.chart.setOption(this.chartOptions)
    },
  }
}
</script>
